<template>
  <div>
    <section id="wrapper">
      <div class="login-main">
        <!-- <div id="logo">
          <p class="shadow"></p>
          <div class="logo">
            <img src="~@/assets/img/logo.svg" alt />
            <p class="zn">智能充电管理平台</p>
            <p class="en"></p>
          </div>
        </div> -->
        <div id="login">
          <h3 class="login-title">智能充电管理平台</h3>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon
            style="width: 350px">
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码"></el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img style="height: 38px" :src="captchaPath" @click="getCaptcha()" alt />
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录
              </el-button>
            </el-form-item>
          </el-form>
          <div class="logbanquan"> 版权所有：广东省云禾智能科技发展有限公司  粤ICP备2021147417号   电脑版 | 手机版</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getUUID } from "@/utils";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      dataForm: {
        userName: "",
        password: "",
        uuid: "",
        captcha: "",
      },
      dataRule: {
        userName: [
          { required: true, message: "帐号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
      captchaPath: "",
    };
  },
  async beforeCreate() {
    let params = this.$route.query;
    // console.log("params---", params);
    if (params.username && params.pas) {
      var res = await this.apis.login({
        username: params.username,
        password: params.pas,
        code: "123456",
        uuid: "654321",
      });

      sessionStorage.token = res.token;

      const info = await this.apis.getInfo();

      sessionStorage.role = info.roles[0];
      sessionStorage.userType = info.user.userType;
      sessionStorage.nickName = info.user.nickName;
      sessionStorage.optUserId = info.user.optUserId;
    }
    this.$router.push({
      path: "/home",
    });
  },
  async created() {
    this.getCaptcha();
  },
  mounted() { },
  methods: {
    // 提交表单   
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.login();
        }
      });
    },
    async login() {
      var res = await this.apis.login({
        username: this.dataForm.userName,
        password: this.dataForm.password,
        code: this.dataForm.captcha,
        uuid: this.dataForm.uuid,
      });
      sessionStorage.token = res.token;
      sessionStorage.remark = res.remark;
      const info = await this.apis.getInfo();
      sessionStorage.role = info.roles[0];
      //userType为1是运营商，2是代理商
      sessionStorage.userType = info.user.userType;
      sessionStorage.nickName = info.user.nickName;
      sessionStorage.optUserId = info.user.optUserId;


      if (res.remark == 1) {
        document.title = "中国电信";
      } else if (res.remark == 2) {
        document.title = "格林赛福";
      } else if (res.remark == 3) {
        document.title = "杭州特电";
      }
      this.$message({
        message: res.code == 200 ? '登录成功' : res.msg,
        type: res.code == 200 ? 'success' : "error"
      });
      this.$router.push({
        path: "/home",
      });
    },
    ...mapMutations({
      setUserId: "user/updateId",
    }),
    // 获取验证码
    async getCaptcha() {
      // this.dataForm.uuid = getUUID();
      const res = await this.apis.captchaImage({
        // username:this.dataForm.userName,
        // password:this.dataForm.password
      });
      this.captchaPath = "data:image/jpeg;base64," + res.img;
      console.log('验证码', this.captchaPath);
      this.dataForm.uuid = res.uuid;

    },
  },
};
</script>

<style scoped lang="scss">
#wrapper {
  width: 100vw;
  height: 100vh;
  background-image: url(~@/assets/img/login_bg.png);
}

.login-main {
  width: 420px;
  height: 450px;
  display: flex;
  position: relative;
  left: calc(50% - 210px);
  top: 150px;
}

#logo {
  width: 420px;
  height: 450px;
  position: relative;

  .shadow {
    position: absolute;
    width: 420px;
    height: 450px;
    background-color: rgba(0, 121, 254, 0.8);
    left: 0px;
    top: 0px;
  }

  .logo {
    position: absolute;
    width: 420px;
    height: 450px;
    z-index: 1;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;

    img {
      width: 115px;
      height: 115px;
    }

    .zn {
      margin-top: 30px;
    }

    .en {
      margin-top: 6px;
      font-size: 20px;
      font-weight: 410;
    }
  }
}

#login {
  background: rgba(167, 229, 242, 0.4);
  width: 420px;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }

  .login-title {
    font-size: 20px;
    color: #666;
    margin-bottom: 20px;
  }

  .login-captcha {
    overflow: hidden;

    >img {
      width: 100%;
      cursor: pointer;
    }
  }

  .login-btn-submit {
    width: 100%;
    margin-top: 20px;
    background-color: rgb(109, 205, 210);
    font-size: 16px;
    font-weight: 600;
  }
}

.logbanquan {
  margin: 10px 0px 0px 36px;
  font-weight: 500;
  color: rgb(73, 66, 130);
  line-height: 20px;
  font-size: 14px;
}

:deep .el-input__inner {
  background-color: rgb(245, 249, 249) !important;
  // background-color: transparent !important;

}
</style>
